<template>
  <section class="inner-banner">
    <span class="banner-two__shape-1"></span>
    <span class="banner-two__shape-2"></span>
    <span class="banner-two__shape-3"></span>
    <span class="banner-two__shape-4"></span>
    
    <div class="container" v-if="title == 'Material'">
      <h2 class="inner-banner__title">
        海量优质素材 轻松搭建可视化
      </h2><!-- /.list-unstyled -->
      <h1 class="list-unstyled thm-breadcrumb">精选行业模板、素材、模型 等你使用</h1><!-- /.inner-banner__title -->
      <div class="search-div" v-if="">
        <el-input v-model="keywords" prefix-icon="el-icon-search" placeholder="搜索关键词" class="material-search" clearable @change="materialSearch"/>
      </div>
      <div class="searchBar_keywordWrap">
        <ul class="SearchBar_keyword">
          <li v-for="(item,index) in materialKeywordsList" :key="index">
           <a @click="selectTag(item)"> {{item}} </a>
          </li>
        </ul>
      </div>
    </div><!-- /.container -->
        <div class="container" v-if="title == 'Community'">
      <h2 class="inner-banner__title">
        海量优质素材 轻松搭建可视化
      </h2><!-- /.list-unstyled -->
      <h1 class="list-unstyled thm-breadcrumb">精选行业模板、素材、模型 等你使用</h1><!-- /.inner-banner__title -->
      <div class="search-div" v-if="">
        <el-input v-model="keywords" prefix-icon="el-icon-search" placeholder="搜索关键词" class="material-search" clearable @change="materialSearch"/>
      </div>
      <div class="searchBar_keywordWrap">
        <ul class="SearchBar_keyword">
          <li v-for="(item,index) in communityKeywordsList" :key="index">
           <a @click="selectTag(item)"> {{item}} </a>
          </li>
        </ul>
      </div>
    </div><!-- /.container -->
  </section>
</template>

<script>
import VueEvent from '@/views/tool/datav/VueEvent'

    export default {
      name: "PageHeader",
      props: {
        title: {
          type: String
        }
      },
      data() {
        return {
          keywords:"",
          materialKeywordsList:["地图","环保","企业","监管","销售"],
          communityKeywordsList:["折线","柱状图","自定义","地图"],
        }
      },
      mounted(){
        //监听输入框搜索
        VueEvent.$on('clear-search',function(){
            this.keywords = ""
                            
        }.bind(this))
      },
      methods: {
        //选择标签
        selectTag(item){
          this.keywords = item;
          VueEvent.$emit('material-search',item)
        },
        //监听输入框变化
        materialSearch(item){
          VueEvent.$emit('material-search',item)
        }
      },
    }
</script>

<style scoped>
.inner-banner {
    padding-top: 120px;
    padding-bottom: 40px;
}
.inner-banner__title{
  height: 48px;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
}
.thm-breadcrumb{
  margin-bottom: 32px;
  color: #dfe7f1;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.search-div{
  text-align: center;
  width: 15%;
  min-width: 420px;
  margin: 0 auto;
}
::v-deep .material-search .el-input__inner{
  border: 1px solid #dbdfe5;
  border-radius: 35px;
}
.searchBar_keywordWrap{
  margin-top: 8px;
}
.SearchBar_keyword{
  display: flex;
  justify-content: center;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.SearchBar_keyword li {
    padding: 0 6px;
    color: #808a97;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
}

.SearchBar_keyword a {
    cursor: pointer;
    text-decoration: inherit;
}
a:hover {
    color: #1890ff;
}
</style>
